<template>
  <div class="offline_stock_import">
    <el-container class="base_details_container">
      <BackTitleView title="导入礼包码" />
      <el-main>
        <div class="base_details_content">
          <div class="content">
            <div class="base_details_title_button">
              <div class="tb_title">导入礼包码</div>
            </div>
            <div class="base_details_content_second">
              <el-form ref="giftCodeFormRef" :model="giftCodeForm" :rules="giftCodeFormRules" label-width="100px">
                <el-form-item label="发放人员" prop="salesman">
                  <el-select v-model="giftCodeForm.salesman" placeholder="请选择" filterable>
                    <el-option v-for="(item, index) in accountOptions" :key="index" :label="item.label" :value="item.value" />
                  </el-select>
                </el-form-item>
              </el-form>
              <el-upload ref="upload" :action="url" accept=".xls,.xlsx" :name="name" :headers="headers" :on-success="uploadSuccess" :limit="1" drag>
                <el-icon class="el-icon--upload"><upload-filled /></el-icon>
                <div class="el-upload__text">
                  将Excel表格拖到此处，或<em>点击上传</em>
                </div>
                <template #tip>
                  <div class="el-upload__tip">
                    <!-- <div>注意：</div>
                    <div>1.请严格按照Excel表格模板录入信息</div>
                    <div>2.不要改动Excel表格模板格式</div> -->
                  </div>
                </template>
              </el-upload>
            </div>
          </div>
        </div>
      </el-main>
      <el-footer>
        <el-button @click="back">取消</el-button>
        <el-button @click="checkForm" type="primary">保存</el-button>
      </el-footer>
    </el-container>
  </div>
</template>

<script setup>
import BackTitleView from "@com/BackTitleView.vue";
import { UploadFilled } from '@element-plus/icons-vue'
import $ from "@util/base";
import { ref } from "vue";
import { UPLOAD_FILE_URL } from "@net/url"
import auth from "@net/auth"
import { $msg } from "@ui/msg";
import useRoute from "@util/router";
import api from "@api/giftCode";
const route = useRoute();

const giftCodeFormRef = ref(null)
const accountOptions = ref([])

const giftCodeForm = ref({
  salesman: null
})
const giftCodeFormRules = {
  salesman: [{
    required: true,
    message: '请选择发放人员',
    trigger: 'change',
  }]
}

getConfig()

function getConfig() {
  api.account(val => {
    accountOptions.value = val
  })
}

const url = UPLOAD_FILE_URL

// 上传文件字段名
const name = 'file_data'

const headers = { accessToken: auth.getToken() }

const file = ref(null)

function uploadSuccess(response) {
  if (response.code === 0) {
    file.value = response.data.fileUrl
  }
}

function checkForm() {
  giftCodeFormRef.value.validate((valid) => {
    if (valid) {
      if ($.isEmpty(file.value)) {
        $msg.error("请上传Excel表格");
      } else {
        api.import({
          giftCode:	route.query().code,
          salesman: giftCodeForm.value.salesman,
          filePath: file.value
        }, val => {
          $msg.succ("导入成功");
          back()
        })
      } 
    }
  })
}

function back() {
  route.go(-1);
}
</script>

<style lang="scss" scoped>
.offline_stock_import {
  height: 100%;
}
</style>
